<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="https://raw.github.com/filamentgroup/jqm-pagination/master/jquery.mobile.pagination.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/filamentgroup/jqm-pagination/master/jquery.mobile.pagination.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


<link rel="stylesheet" href="stylesheet/avengers.css">

<script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   
   //setear variable en el logueo
   usuarioId=1;

    $('#Login').click(function () {

           if ($("#usuario").val() == '') {
              $("span#alertLogin").html("Ingrese su usuario");              
               return false;
           }
           if ($("#password").val() == '') {
              $("span#alertLogin").html("Ingrese su clave");  
               return false;
           }

           $.ajax({
               url: "http://localhost:8080/avengers-server/services/rest/users/validateUser/" + $("#usuario").val()+"/"+$("#password").val(),
               type: 'GET',
               success: function (data) {
                   $.mobile.changePage($('#home'), 'pop');
               },
               error: function (xhr, ajaxOptions, thrownError) {            
                  alert('Usuario y/o password incorrectos');
                                            
               }
           });


           return false;
       });
    
    $('#Clientes').click(function () {
       $.mobile.changePage($('#client'), 'pop');
        
      $.ajax({
            url: "http://localhost:8080/avengers-server/services/rest/clients",
          type: 'GET',
            success: function (data) {
               $("ul#clientList").empty();    
               $.each(data, function(i,client){
                     var result = '<li><a class="friend_profile" data-search_user_id="' + client.id + '">' +
                     '<img class="round" src="images/clients/' + client.id + '.jpg' + '" />' +
                     '<h3>' + client.name + ' ' + client.appaterno + ' ' + client.apmaterno +'</h3><p>' + client.mobile + '</p>' +
                     '</a></li>';
                     $("ul#clientList").append(result);
                     $("ul#clientList").listview('refresh');
               });         
          },
             error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
            }
      });
        return false;
    });
    
    $('#Productos').click(function () {
        $.mobile.changePage($('#product'), 'pop');
        
          $.ajax({
              url: "http://localhost:8080/avengers-server/services/rest/products",
              type: 'GET',
              success: function (data) {
                 $("ul#productList").empty();          
                 $.each(data, function(i,product){
                      var result = '<li><a class="friend_profile" data-search_user_id="' + product.id + '">' +
                      '<img class="round" src="images/products/' + product.id + '.jpg' + '" />'+
                      '<h2>' + product.name +'</h2><p>' + product.stock + '</p>' +
                      '</a></li>';
                      $("ul#productList").append(result);
                      $("ul#productList").listview('refresh');
                  });
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
              }
          });
        
        return false;
    });
    
    $('#productList').find('a').live('click', function () {
      $.mobile.changePage($('#productByID'), 'pop');      
      $.ajax({
              url: "http://localhost:8080/avengers-server/services/rest/products/" +  $(this).attr('data-search_user_id'),
              type: 'GET',
              success: function (data) {
                $('#productname').val(data.name);
                $('#productdescription').val(data.description);
                $('#productprecio').val(data.precio);
                $('#product-thumb-image').attr('src','images/products/thumb_' + data.id + '.png');    
                $.mobile.changePage($('#productByID'), {
                   transition: "pop",
                    reverse: false,
                    changeHash: false
                } );   
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
              }
          });
        
        return false;
    });
    
    
    $('#clientList').find('a').live('click', function () {
      $.ajax({
              url: "http://localhost:8080/avengers-server/services/rest/clients/" +  $(this).attr('data-search_user_id'),
              type: 'GET',
              success: function (data) {
                $('#clientname').val(data.name);
                $('#clientappaterno').val(data.appaterno);
                $('#clientapmaterno').val(data.apmaterno);
                $('#clientdirec').val(data.direc);
                $('#clientmobile').val(data.mobile);
                $('#clienttelf').val(data.telf);
                $('#client-thumb-image').attr('src','images/clients/thumb_' + data.id + '.png');    
                $.mobile.changePage($('#clientByID'), {
                   transition: "pop",
                    reverse: false,
                    changeHash: false
            } );    
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
              }
          });
        
        return false;
    });
    
    $('#DoPedido').click(function () {

       $.mobile.changePage('#orders');

       $('#ordesList').html("");
       $('#ordesList').listview('refresh');
                     
       var menuItem = $("<option>Seleccione cliente</option>");
       $("#clients").append(menuItem);   

       $.ajax({
            url: "http://localhost:8080/avengers-server/services/rest/clients",
          type: 'GET',
            success: function (data) {
               
             $.each(data, function (index, client) {
                var menuItem = $("<option id=''> </option>");
                 menuItem.html(client.name+' '+client.appaterno);
                 menuItem.attr('id',client.id);
                 $("#clients").append(menuItem);                 
             });
             $("#clients").selectmenu('refresh');       
          },
             error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
            }
      });

    

       var menuItem = $("<option>Seleccione producto</option>");
       $("#products").append(menuItem);   
       
        $.ajax({
            url: "http://localhost:8080/avengers-server/services/rest/products",
            type: 'GET',
            success: function (data) {
               
               $.each(data, function (index, product) {
                var menuItem = $("<option id=''> </option>");
                 menuItem.html(product.name);
                 menuItem.attr('id',product.id);
                 $("#products").append(menuItem);   
                                  
                 
             });
             $("#products").selectmenu('refresh');   
            
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    
    
 
    
    
});


   
    var arrayOrders = new Array();
    var count=0;
    
    $('#agregar').click(function (){
       
       var orderDetail  = {producto: $("#products")[0].selectedIndex, cantPedido: $("#cantidad").val()};
       arrayOrders[count] =$.toJSON(orderDetail) ;
       
       count ++;  
       
       $('#ordesList').append("<li><span id='"+$("#products")[0].selectedIndex+"' style='font-size: 10px'>"+$("#products").val()+" <BR> Cantidad " + $("#cantidad").val()+ "</span><BR/></li>");
          
       $('#ordesList').listview('refresh');           
       $("#cantidad").val('');
       
    });
    
    
    $('#pedir').click(function (){
       
        var order  = {cliente: $("#clients")[0].selectedIndex, usuario: usuarioId};
        
         $.ajax({
             url: "http://localhost:8080/avengers-server/services/rest/orders/"+$.toJSON(order)+"/"+arrayOrders,
             type: 'PUT',
             dataType: 'json',
             success: function (data) {
                 $.mobile.changePage($('#home'), 'pop');
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.status);
                 alert(thrownError);
             }
         });
                         
          arrayOrders = new Array();
          count=0;
         
       
    });

     
    $('#OwnPedidos').click(function (){

       
       $.mobile.changePage($('#ownOrdes'));
        $.ajax({
            url: "http://localhost:8080/avengers-server/services/rest/orders/"+usuarioId,
            type: 'GET',
            async: false,
            success: function (data) {
               
            $('#ownOrdersList').html("");

            var clientInfo='';
            var clientId;
         
            $.each(data, function (index, pedido) {

               var estado =pedido.estado==0 ? 'Pendiente':'Atendido';

                         

              $.ajax({
                    url: "http://localhost:8080/avengers-server/services/rest/clients/"+pedido.cliente,
                    type: 'GET',
                    async: false,
                    success: function (data) {                      
                       clientInfo= data.name+' '+data.appaterno+' '+data.apmaterno;
                       clientId=data.id;
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });

                 var result = '<li><a class="friend_profile" data-search-pedido-id="' + pedido.idPedido + '">' +
                  '<img class="round" src="images/clients/' + clientId + '.jpg' + '" />' +
                  '<h3> Num # ' + pedido.idPedido + " - Cliente :"+ clientInfo +'</h3><p>' + " - Estado :" +estado+'</p>' +
                  '</a></li>';
                  
                  $("ul#ownOrdersList").append(result);
                  $("ul#ownOrdersList").listview('refresh');           
            });
            $('#ownOrdersList').listview('refresh');
            
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    
    });


///
			//Pedidos      
			     
			  $('#ownOrdersList').find('a').live('click', function () {
			      $.mobile.changePage($('#detallePedido'), 'pop');      
			      $.ajax({
			              url: "http://localhost:8080/avengers-server/services/rest/orders/detalle/" +  $(this).attr('data-search-pedido-id'),
			              type: 'GET',
			              success: function (data) {
					         $("ul#pedidoDetalleList").empty();     
					         
					        var producto_;
							var	producto_des;
							var precio_;
								     
			                $.each(data, function(i,product){
																					 
									$.ajax({
										  url: "http://localhost:8080/avengers-server/services/rest/products/"+product.producto,
										  type: 'GET',
										  async: false,
										  success: function (dat) {
										   
										    producto_=dat.name;										    
											producto_des=dat.description;
											precio_=dat.precio;		
																			
										  },
										  error: function (xhr, ajaxOptions, thrownError) {
											  alert(xhr.status);
											  alert(thrownError);
										  }
									  });		 
											 
							 
							 	 
			                      var result = '<li><a class="friend_profile" data-search-pedido-id="' + product.id + '">' +
			                      '<img class="round" src="images/products/' + product.producto + '.jpg' + '" />'+
			                      '<h2>' + producto_+':'+producto_des+'</h2><p> Cantidad :' + product.cantPedido +' Precio :'+precio_+ '</p>' +
			                      '</a></li>';
			                      $("ul#pedidoDetalleList").append(result);
			                      $("ul#pedidoDetalleList").listview('refresh');
			                  });
			              },
			              error: function (xhr, ajaxOptions, thrownError) {
			                  alert(xhr.status);
			                  alert(thrownError);
			              }
			          });
			        
			        return false;
			    });
			///

    
});

jQuery( '[data-role="page"]' ).live('pageshow',function(event){             
    scroll(0,0);       
   header = $(".header:visible");
   footer = $(".footer:visible");
   content = $(".content:visible");           
   viewport_height = $(window).height();               
   content_height = viewport_height - header.outerHeight() - footer.outerHeight();
   content_height -= (content.outerHeight() - content.height());          
   content.height(content_height);    
   
});










</script>

</head>

<body>

        <div id="avengers_login" data-role="page" data-theme="c" data-fullscreen="true">

                <div data-role="header" class='header'>
                        <div id="logo" style="align: left;">
                                <table style="width: 100%; padding: 0;">
                                        <tr>
                                                <td align="left"></td>
                                                <td align="right"><a href="#opciones" data-role="button"
                                                        data-icon="grid" data-rel="dialog" data-transition="pop"
                                                        data-iconpos="notext">Opciones</a></td>
                                        </tr>
                                </table>
                        </div>
                </div>

                <div data-role="content" class='content' id="map_content" data-theme="c">

                        <ul data-role="listview" data-inset="true" data-theme="c">
                                <li data-role="list-divider">INICIO DE SESSION</li>
                                <li>
                                       <form>
                                                <div align="center">
                                                        
                                                        <div>
                                                 <span style="font-size: 11px;">Usuario</span> <input type="text"
                                                          name="usuario" id="usuario" />
                                                   </div>
                                                   
                                                     <div>
                                                 <span style="font-size: 11px;">Clave</span> <input type="password" name="password"
                                                         id="password" />
                                                   </div>
                                                      
                                                        
                                                         <div>
                                                 
                                                         <input   type="submit" value="Ingresar" data-role="button" id="Login"
                                                                        data-icon="gear" data-theme="c" /> <BR> <span
                                                                        style="font-size: 12px"><b>Bienvenido al sistema de pedidos mobile</b></span>
                                                        </div>
                                                        <div>                                                                
                                                         <span style="color: red; font-size: 11px" id="alertLogin"> </span>                                                                
                                                        </div>
                                                        
                                                        </div>
                                                
                                        </form>
                                </li>
                        </ul>
                </div>
                <div data-role="footer" data-theme="c" class='footer'></div>
        </div>

        <div id="home" data-role="page" data-theme="c" data-fullscreen="true">
             <div data-role="header" class='header'>
                <div id="logo" style="align: left;">
               <a href="#avengers_login" data-role="button" data-icon="forward" data-transition="pop" data-iconpos="notext">Salir</a>                      
            </div>
          </div>
           <div data-role="content" class='content' id="map_content" data-theme="c">
              <ul data-role="listview" data-inset="true" data-theme="c">
                     <li data-role="list-divider">
                        <div class='titulos'>
                          <span>MIS OPCIONES</span>   
                       </div>
                    </li>
            </ul>
                 <a href="#" data-role="button" data-icon="plus" id="Clientes"><span>CLIENTES</span></a>
                <a href="#" data-role="button" data-icon="plus" id="Productos"><span>PRODUCTOS</span></a>
                 <a href="#" data-role="button" data-icon="plus" id="DoPedido"><span>HACER UN PEDIDO</span></a>
                 <a href="#" data-role="button" data-icon="plus" id="OwnPedidos"><span>MIS PEDIDOS</span></a>
                
             </div>
         <div data-role="footer" data-theme="c" class='footer'>
             <div data-role="navbar">
               <ul>
                  <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
               </ul>
            </div>
         </div>   
        </div>
        
 
      <div id="client" data-role="page" data-theme="c"  data-fullscreen="true">   
         <div data-role="header" class='header'>      
            <div id="logo">  
               <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
            </div>         
         </div>   
           <div data-role="content" class='content' id="map_content" data-theme="c">   
            <ul data-role="listview" data-inset="true" data-theme="c">                                
               <li data-role="list-divider">
                  <div class='titulos'>
                          <span>LISTADO DE CLIENTES</span>   
                       </div>
               </li>
            </ul>
             <div id="listing">                      
               <ul  id="clientList" data-role='listview' data-filter='true' data-theme='e'>                                                                   
               </ul>
              </div>            
          </div>                  
         <div data-role="footer" data-theme="c" class='footer'>
             <div data-role="navbar">
               <ul>
                  <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                     <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
               </ul>
            </div>
         </div>   
      </div>

        <div id="product" data-role="page" data-theme="c"  data-fullscreen="true">
            <div data-role="header" class='header'>      
               <div id="logo">  
                  <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
               </div>         
            </div>   
               <div data-role="content" class='content' id="map_content" data-theme="c">   
               <ul data-role="listview" data-inset="true" data-theme="c">                                
                  <li data-role="list-divider" >
                      <div class='titulos'>
                             <span>LISTADO DE PRODUCTOS</span>   
                          </div>    
                  </li>
               </ul>
                <div id="listing">                      
                  <ul  id="productList" data-role='listview' data-filter='true' data-theme='e'>                                                                   
                  </ul>
                 </div>            
             </div>                                         
            <div data-role="footer" data-theme="c" class='footer'>
                   <div data-role="navbar">
                     <ul>
                        <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                           <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
                     </ul>
                  </div>
               </div>   
         </div>

      
       <div id="clientByID" data-role="page" data-theme="c"  data-fullscreen="true">
          <div data-role="header" class='header'>
            <div id="logo">
               <a href="#client" data-role="button" data-icon="back" data-transition="pop" data-iconpos="notext">Atras</a>    
               <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
            </div>
          </div>   
          <div data-role="content" class='content' id="map_content" data-theme="c">     
             <ul data-role="listview" data-inset="true" data-theme="c">
                  <li data-role="list-divider">  
                  <div class='titulos'>
                          <span>Cliente</span>
                       </div>
                </li>
            </ul>
            <div id="client-information">
               <div data-role="fieldcontain">
                  <label for="clientname">Nombre:</label><br /><input type="text" name="clientname" id='clientname' value="" disabled />
               </div>            
               <div data-role="fieldcontain">
                  <label for="clientappaterno">Apellido Paterno:</label><br /><input type="text" name="clientappaterno" id="clientappaterno" value="" disabled  />
               </div>           
               <div data-role="fieldcontain">
                  <label for="clientapmaterno">Apellido Materno:</label><br /><input type="text" name="clientapmaterno" id="clientapmaterno" value="" disabled  />
               </div>          
               <div data-role="fieldcontain">
                  <label for="clientdirec">Direccion:</label><br /><input type="text" name="clientdirec" id="clientdirec" value="" disabled  />
               </div>          
               <div data-role="fieldcontain">
                  <label for="clientmobile">Celular:</label><br /><input type="text" name="clientmobile" id="clientmobile" value="" disabled  />
               </div>               
               <div data-role="fieldcontain">
                  <label for="clienttelf">Teléfono:</label><br /><input type="text" name="clienttelf" id="clienttelf" value="" disabled  />
               </div>         
            </div>     
            <div id="client-image">
               <img id="client-thumb-image" src="" alt="">
            </div>
          </div>                               
         <div data-role="footer" data-theme="c" class='footer'>
            <div data-role="navbar">
               <ul>
                   <li><a href="#client" id="goHome" data-role="button" data-icon="back" data-iconpos="top">Clientes</a></li>
                   <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                     <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
               </ul>
            </div>
         </div>
      </div>

       <div id="productByID" data-role="page" data-theme="c"  data-fullscreen="true">
         <div data-role="header" class='header'>
            <div id="logo">
               <a href="#product" data-role="button" data-icon="back" data-transition="pop" data-iconpos="notext">Atras</a>    
               <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
            </div>
          </div>      
         <div data-role="content" class='content' id="map_content" data-theme="c">
            <ul data-role="listview" data-inset="true" data-theme="c">
               <li data-role="list-divider">  
                  <div class='titulos'>
                     <span>Producto</span>
                  </div>
               </li>
            </ul>
            <div id="product-information">
               <div data-role="fieldcontain">
                  <label for="productname">Nombre:</label><br /><input type="text" name="productname" id='productname' value="" disabled />
               </div>
               <div data-role="fieldcontain">
                  <label for="productdescription">Descripcion:</label><br /><input type="text" name="productdescription" id="productdescription" value="" disabled  />
               </div>  
                        
               <div data-role="fieldcontain">
                        <label for="productprecio">Precio:</label><br />
                        <input type="text" name="productprecio" id="productprecio" value="" disabled  />
               </div>
            </div>      
            <div id="product-image">
               <img id="product-thumb-image" src="" alt="">
            </div>  
         </div>               
         <div data-role="footer" data-theme="c" class='footer'>
            <div data-role="navbar">
               <ul>
                   <li><a href="#product" id="goHome" data-role="button" data-icon="back" data-iconpos="top">Productos</a></li>
                   <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                     <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
               </ul>
            </div>
         </div>
      </div>

      <div id="orders" data-role="page" data-theme="c"  data-fullscreen="true" >

             <div data-role="header" class='header'>      
               <div id="logo">  
                  <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
               </div>         
            </div>

             <div data-role="content" class='content' id="map_content" data-theme="c">   
               <ul data-role="listview" data-inset="true" data-theme="c">                                
                  <li data-role="list-divider" >
                      <div class='titulos'>
                             <span>HACER UN PEDIDO</span>   
                          </div>    
                  </li>
               </ul>
                 <div style="font-size: 12px;" align="center">
                             <select name="clients" id="clients"></select>            
                             <select name="products" id="products"></select> <BR>
                             <span >Ingrese la cantidad</span>
                             <input type="text" name="cantidad" id="cantidad" />                         
                             <a href="#" data-role="button"  id="agregar">Agregar</a> <BR><BR><BR>
                             
                              <ul  id="ordesList" data-role='listview' data-theme='e'>                                                                   
                            </ul>  
                            
                            <BR><BR><BR>
                             <a href="#" data-role="button"  id="pedir">Pedir</a>
                             
                  </div>       
                </div>            

                 <div data-role="footer" data-theme="c" class='footer'>
                   <div data-role="navbar">
                     <ul>
                        <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                           <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
                     </ul>
                  </div>
              </div>                                           
         </div>
         
         
          <div id="ownOrdes" data-role="page" data-theme="c"  data-fullscreen="true" >

                  <div data-role="header" class='header'>      
                  <div id="logo">  
                     <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
                  </div>         
               </div>

               <div data-role="content" class='content' id="map_content" data-theme="c">                                          
                                              
                              <ul data-role="listview" data-inset="true" data-theme="c">                                      
                                  <li data-role="list-divider" >
                               <div class='titulos'>
                                      <span>Mis Pedidos</span>   
                                   </div>    
                           </li>
                            </ul>
                            <div id="listing">                      
                           <ul  id="ownOrdersList" data-role='listview' data-filter='true' data-theme='e'>                                                                   
                           </ul>
                       </div>  
                            
              </div>
        
                                        
                <div data-role="footer" data-theme="c" class='footer'>
                      <div data-role="navbar">
                        <ul>
                           <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                              <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
                        </ul>
                     </div>
              </div>   
         </div>
         
          <div id="detallePedido" data-role="page" data-theme="c"  data-fullscreen="true">
            <div data-role="header" class='header'>      
               <div id="logo">  
                  <a href="#home" data-role="button" data-icon="home" data-transition="pop" data-iconpos="notext">Opciones</a>            
               </div>         
            </div>   
               <div data-role="content" class='content' id="map_content" data-theme="c">   
               <ul data-role="listview" data-inset="true" data-theme="c">                                
                  <li data-role="list-divider" >
                      <div class='titulos'>
                             <span>DETALLE DE PEDIDO</span>   
                          </div>    
                  </li>
               </ul>
                <div id="listing">                      
                  <ul  id="pedidoDetalleList" data-role='listview' data-filter='true' data-theme='e'>                                                                   
                  </ul>
                 </div>            
             </div>                                         
            <div data-role="footer" data-theme="c" class='footer'>
                   <div data-role="navbar">
                     <ul>
                        <li><a href="#home" id="goHome" data-role="button" data-icon="home" data-iconpos="top">Home</a></li>
                           <li><a href="#avengers_login" id="goOut" data-role="button" data-icon="forward" data-iconpos="top">Salir</a></li>
                     </ul>
                  </div>
               </div>   
         </div>
         
         

</body>
</html>